import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

export default function Chart5() {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);

  useEffect(() => {
    if (chartRef.current) {
      // 初始化图表
      chartInstance.current = echarts.init(chartRef.current);

      // 生成模拟数据
      const generateData = () => {
        const data = [];
        const hours = 24;
        const pointsPerHour = 6; // 每10分钟一个点

        for (let hour = 0; hour < hours; hour++) {
          for (let point = 0; point < pointsPerHour; point++) {
            const minute = point * 10;
            const time = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;

            // 根据时间设置基础 PM2.5 值
            let baseValue;
            if (hour >= 0 && hour < 6) {
              // 凌晨（00:00-06:00）
              baseValue = 18; // 凌晨 PM2.5 最高
            } else if (hour >= 6 && hour < 12) {
              // 上午（06:00-12:00）
              baseValue = 16; // 上午 PM2.5 略低
            } else if (hour >= 12 && hour < 18) {
              // 下午（12:00-18:00）
              baseValue = 15; // 下午 PM2.5 最低
            } else {
              // 晚上（18:00-24:00）
              baseValue = 17; // 晚上 PM2.5 回升
            }

            // 添加更小的随机波动
            const randomFluctuation = Math.random() * 1 - 0.5;
            // 添加更平滑的短期波动
            const shortTermNoise =
              Math.sin(
                ((hour * pointsPerHour + point) / (pointsPerHour * 4)) *
                  Math.PI,
              ) * 0.5;

            let value = baseValue + randomFluctuation + shortTermNoise;
            value = Math.max(0, Math.min(25, Math.round(value * 10) / 10)); // 保留一位小数

            data.push([time, value]);
          }
        }
        return data;
      };

      const data = generateData();

      // 配置项
      const option = {
        grid: {
          top: 20,
          right: 20,
          bottom: 20,
          left: 40,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map((item) => item[0]),
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
          axisLabel: {
            color: '#999',
            interval: 23, // 每4小时显示一个刻度
            formatter: (value: string) => {
              const [hour] = value.split(':');
              return `${hour}:00`;
            },
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 25,
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
          axisLabel: {
            color: '#999',
          },
        },
        series: [
          {
            data: data.map((item) => item[1]),
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 2,
              color: '#52c41a', // 绿色
            },
          },
        ],
      };

      // 设置配置项
      chartInstance.current.setOption(option);

      // 监听窗口大小变化
      const handleResize = () => {
        chartInstance.current?.resize();
      };
      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
        chartInstance.current?.dispose();
      };
    }
  }, []);

  return (
    <div
      ref={chartRef}
      style={{
        width: '100%',
        height: '30vh',
      }}
    />
  );
}
